<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en" lang="en">

  <head>
    <title>org.brophy.js Library Demos</title>
    <script type="text/javascript">MochiKit = {__export__: false};</script>
    <script type="text/javascript" src="../MochiKit/MochiKit.js"></script>
    <script type="text/javascript" src="../org/brophy/js/constant.js"></script>
    <script type="text/javascript" src="../org/brophy/js/util.js"></script>
    <script type="text/javascript" src="../org/brophy/js/ajax.js"></script>
    <script type="text/javascript" src="../org/brophy/js/array.js"></script>
    <script type="text/javascript" src="../org/brophy/js/select.js"></script>
    <script type="text/javascript" src="../org/brophy/js/event.js"></script>
    <script type="text/javascript" src="./org.brophy.js.demo.js"></script>
    <link rel="stylesheet" type="text/css" href="../org/brophy/css/org.brophy.js.css"/>
    <link rel="stylesheet" type="text/css" href="org.brophy.js.demo.css"/>

    <script type="text/javascript">
    //<![CDATA[
    
      // Global namespace to store all demo functions
      obj = {};

      window.onload = function()
      {
        org.brophy.js.demo.drawPageHeader("select");

        var jsCode, htmlCode, instructions;
        
        /********************************************
         * org.brophy.js.select.sortSelectOptions 
         ********************************************/ 
        htmlCode = 
           "<div>                                                        \n" + 
           "  Inspect the contents of this Select, and then press Sort:  \n" +
           "  <select id='sortedSelectId1'>                              \n" + 
           "    <option value='4'>Value = 4</option>                     \n" + 
           "    <option value='2'>Value = 2</option>                     \n" + 
           "    <option value='1'>Value = 1</option>                     \n" + 
           "    <option value='5'>Value = 5</option>                     \n" + 
           "    <option value='-1'>Value = -1</option>                   \n" + 
           "    <option value='monkey'>Value = monkey</option>           \n" + 
           "    <option value='8'>Value = 8</option>                     \n" + 
           "  </select>                                                  \n" +
           "  &nbsp;&nbsp;                                               \n" +
           "  <input type='button' value='Sort'                          \n" + 
           "         onclick='obj.sortSelectDemo1();'/>\n" + 
           "</div>                                                       \n" +
           "                                                             \n" +
           "<div>                                                        \n" +
           "  This select will ignore the first informational element:   \n" +
           "  <select id='sortedSelectId2'>                              \n" +
           "    <option value=''>Please select a Fruit...</option>       \n" +
           "    <option value='Bananas'>Bananas</option>                 \n" +
           "    <option value='Oranges'>Oranges</option>                 \n" +
           "    <option value='Kiwis'>Kiwis</option>                     \n" +
           "    <option value='Apples'>Apples</option>                   \n" +
           "    <option value='Cherries'>Cherries</option>               \n" +
           "    <option value='Lemons'>Lemons</option>                   \n" +
           "    <option value='Limes'>Limes</option>                     \n" +
           "  </select>                                                  \n" +
           "  &nbsp;&nbsp;                                               \n" +
           "  <input type='button' value='Sort' onclick='obj.sortSelectDemo2();'/>\n" + 
           "</div>                                                       \n" +
           "                                                             \n";
  
        jsCode = 
          "obj.sortSelectDemo1 = function()                             \n" + 
          "{                                                            \n" + 
          "  var sel = MochiKit.DOM.getElement('sortedSelectId1');      \n" + 
          "  org.brophy.js.select.sortSelectOptions(sel);               \n" + 
          "}                                                            \n" +
          "                                                             \n" + 
          "obj.sortSelectDemo2 = function()                             \n" + 
          "{                                                            \n" + 
          "  var sel = MochiKit.DOM.getElement('sortedSelectId2');      \n" + 
          "  org.brophy.js.select.sortSelectOptions(sel, 1);            \n" + 
          "}                                                            \n";
  
        instructions = 
          "There are two identical select elements below.  Click the   \n" + 
          "button to sort the second one.";
   
        org.brophy.js.demo.drawDemoSection(
                             "org.brophy.js.select.sortSelectOptions",
                             "demo_obj_select_sortSelectOptions",
                             htmlCode,
                             jsCode,
                             instructions);
        
  
        /********************************************
         * org.brophy.js.select.setSelectedIndex
         ********************************************/ 
        htmlCode = 
           "<div class='demo'>                                           \n" + 
           "  Enter the index you would like to select and press Go:     \n" +
           "  &nbsp;&nbsp;                                               \n" +
           "  <input type='text' id='indexId'/>                 \n" + 
           "  &nbsp;&nbsp;                                               \n" +
           "  <input type='button' value='Go!'                           \n" + 
           "         onclick='obj.setSelectedIndexDemo();'/>             \n" + 
           "  &nbsp;&nbsp;                                               \n" +
           "  <select id='setIndexSelectId'>                             \n" + 
           "    <option value='0'>Index = 0</option>                     \n" + 
           "    <option value='1'>Index = 1</option>                     \n" + 
           "    <option value='2'>Index = 2</option>                     \n" + 
           "    <option value='3'>Index = 3</option>                     \n" + 
           "    <option value='4'>Index = 4</option>                     \n" + 
           "    <option value='5'>Index = 5</option>                     \n" + 
           "    <option value='6'>Index = 6</option>                     \n" + 
           "  </select>                                                  \n" +
           "</div>                                                       \n" +
           "                                                             \n";
  
        jsCode = 
          "obj.setSelectedIndexDemo = function()                        \n" + 
          "{                                                            \n" + 
          "  var sel = MochiKit.DOM.getElement('setIndexSelectId');     \n" + 
          "  var index = MochiKit.DOM.getElement('indexId').value;      \n" + 
          "  org.brophy.js.select.setSelectedIndex(sel,index);          \n" + 
          "}                                                            \n";
  
        instructions = "Enter the index you would like to select and press Go";
   
        org.brophy.js.demo.drawDemoSection(
                             "org.brophy.js.select.setSelectedIndex",
                             "demo_obj_select_setSelectedIndex",
                             htmlCode,
                             jsCode,
                             instructions);
        
  
        /*************************************************
         * org.brophy.js.select.setSelectedIndexByValue
         *************************************************/ 
        htmlCode = 
           "<div>                                                        \n" + 
           "  Enter the value of the option  you would like to select    \n" +
           "  and press Go:                                              \n" +
           "  &nbsp;&nbsp;                                               \n" +
           "  <input type='text' id='indexByValueId' size='3'/>          \n" + 
           "  &nbsp;&nbsp;                                               \n" +
           "  <input type='button' value='Go!'                           \n" + 
           "         onclick='obj.setSelectedIndexByValueDemo();'/>      \n" + 
           "  &nbsp;&nbsp;                                               \n" +
           "  <select id='setIndexByValueSelectId'>                      \n" + 
           "    <option value='0'>Value = 0</option>                     \n" + 
           "    <option value='1'>Value = 1</option>                     \n" + 
           "    <option value='2'>Value = 2</option>                     \n" + 
           "    <option value='3'>Value = 3</option>                     \n" + 
           "    <option value='4'>Value = 4</option>                     \n" + 
           "    <option value='5'>Value = 5</option>                     \n" + 
           "    <option value='6'>Value = 6</option>                     \n" + 
           "  </select>                                                  \n" +
           "</div>                                                       \n" +
           "                                                             \n";
  
        jsCode = 
          "obj.setSelectedIndexByValueDemo = function()                  \n" + 
          "{                                                             \n" + 
          "  var sel = MochiKit.DOM.getElement('setIndexByValueSelectId');\n" + 
          "  var val = MochiKit.DOM.getElement('indexByValueId').value;  \n" + 
          "  org.brophy.js.select.setSelectedIndexByValue(sel,val);      \n" + 
          "}                                                             \n";
  
        instructions = "";
   
        org.brophy.js.demo.drawDemoSection(
                             "org.brophy.js.select.setSelectedIndexByValue",
                             "demo_obj_select_setSelectedIndexByValue",
                             htmlCode,
                             jsCode,
                             instructions);
        
      }
  
    //]]>
    </script>
  
  </head> 
  
  <body>
  </body>
  
</html>
  
  
  
